<template>
    <section class="leave-vacation">
        
      <div class="year">
        
        <div class="img">
          <img src="../../../../../static/images/year.svg">
          <el-dialog
              :visible.sync="dialogVisible"
              :title='dialogTitle' 
              top='30vh'
            >
             <p style="padding:0 20px 10px 20px;font-size:16px;line-height:28px">
                {{dialogMessage}}
             </p>
              <div class="dialog-footer" style='text-align:right'>
                <el-button @click.stop="dialogVisible = false" type="primary">确 定</el-button>
              </div>

            </el-dialog>
        </div>
        <div class="year-detail">
          <h2>
            <span>年假</span><a class="check" @click.stop='showHelp("year")'>查看年假规则说明</a>
          </h2>
          <ul>
            <li v-for='(k,i) in yearData'  v-if='k.end_dt' :key='i'>
              <p class="first"><span>{{k.years}}{{k.leave_type}}</span> <span>有效期{{k.end_dt}}</span></p>
              <p class="second"><span>共{{k.sum_days}}天</span> <span>已休{{k.sum_days - k.rest_days}}天</span><span>剩余{{k.rest_days}}天</span></p>
               <div class="range">
                <span v-if='parseFloat(k.sum_days) > 0' :style='"width:"+(100-(parseFloat(k.rest_days)/parseFloat(k.sum_days))*100)+"%"'></span>
                <span v-else style='width:100%'></span>
              </div>
            </li>
          </ul>

        </div>
      </div>

      <div class="sick"  v-if='sickData.visible'>
        <div class="img">
          <img src="../../../../../static/images/sick.svg">
        </div>
        <div class="sick-detail">
           
          <h2>
            <span>病假</span><a class="check" @click.stop='showHelp("sick")'>查看病假规则说明</a>
          </h2>
          <ul>
            <li v-for='(k,i) in sickData' :key='i' :style='k.leave_type=="有薪病假"?"padding-top:20px":""'>
              <p class="first"><span>{{k.years}}{{k.leave_type}}</span> <span v-if='k.leave_type ==="全薪病假" && k.end_dt'>有效期{{k.end_dt}}</span> <span style='float:right;color:#26a2ff;' v-if='k.leave_type ==="有薪病假"'>剩余{{k.rest_days}}天</span></p>
              <p class="second" v-if='k.leave_type ==="全薪病假"'><span >共{{k.sum_days}}天</span> <span>已休{{k.sum_days - k.rest_days}}天</span><span>剩余{{k.rest_days}}天</span></p>
              <div class="range" v-if='k.leave_type ==="全薪病假"'>
                <span v-if='parseFloat(k.sum_days) > 0' :style='"width:"+(100-(parseFloat(k.rest_days)/parseFloat(k.sum_days))*100)+"%"'></span>
                <span v-else style='width:100%'></span>
              </div>
            </li>
          </ul>
        </div>
          
      </div>

      
    
    </section>
</template>

<script>
import Vue from 'vue'
import { MessageBox, Message ,Dialog} from 'element-ui';
Vue.use(Dialog)
export default {
  data() {
    return {
      dialogVisible: false,
      dialogMessage:'',
      active: 1,
      dialogTitle:'',
      show: true,

      res: '',

      sickData: [],

      yearData: [],

      startDataList: [],
      yearLeaveList: [],
      sickLeaveList: [],
      sickDetail: {
        comment: ''
      },

      yearDetail: {
        comment: ''
      },

      selectedMe: true,
      dataDeptList: [],

      myLeavePageNum: 1,
      deptLeavePageNum: 1,
      pageSize: 8,

      myleaveEnd: false,
      deptLeaveEnd: false
    };
  },
  mounted() {
    this.getVacation();
    this.getVacationDetail();
  },
  methods: {
    showHelp(type){
      this.dialogTitle = type=="year"?'年假说明':'病假说明'
      this.dialogVisible = true

      if(type=='year'){

        this.dialogMessage = this.yearDetail.comment
      }else {
        
        this.dialogMessage = this.sickDetail.comment
      }
    },
    getVacation() {
      // this.getDeptLeaveData();

      this.Axios.Post(this.URL.getValication.url).then(res => {
        var datas = res.data.datas;
        let yearData = [];
        let sickData = [];

        yearData.push({
          end_dt: datas.endDateAgo,
          sum_days: datas.sunDaysAgo,
          rest_days: datas.surplusAgo,
          leave_type: '年假',
          years: datas.QN
        });

        yearData.push({
          end_dt: datas.endDate,
          sum_days: datas.sunDays,
          rest_days: datas.surplus,
          leave_type: '年假',
          years: datas.JN
        });

        this.yearData = yearData;

        sickData.push({
          end_dt: datas.qxendDate,
          sum_days: datas.qxDays,
          rest_days: datas.surplusQX,
          leave_type: '全薪病假'
        });

        sickData.push({
          end_dt: '',
          sum_days: '',
          rest_days: datas.surplusYX,
          leave_type: '有薪病假'
        });

        let visible = parseFloat(datas.yxsumdays) > 0 ? true : false;

        sickData.visible = visible;

        this.sickData = sickData;
      });
    },
    getVacationDetail() {
      this.Axios.Post(this.URL.getLeaveInstruction.url).then(res => {
        let datas = res.data.datas;

        datas.forEach((ele, i) => {
          if (ele.code_name === '年假') {
            this.yearDetail.comment = ele.comment;
          }

          if (ele.code_name === '病假') {
            this.sickDetail.comment = ele.comment;
          }
        });
      });
    }
  }
};
</script>

<style scoped lang='less'>
.leave-vacation {
  background-color: #fff;
  overflow: hidden;
  padding: 15px;

  & > div {
    float: left;
    width: 50%;
    background-color: #fff;
    padding: 20px 0 10px 0;
    letter-spacing: 1px;
    .img {
      float: left;
      margin-right: 20px;
      margin-left: 25px;
      img {
        width: 70px;
        height: 70px;
        display: inline-block;
      }
    }

    a.check {
      color: #26a2ff;
      cursor: pointer;
      margin-left: 20px;
      font-size: 14px;
      font-weight: normal;
    }

    .first {
      padding: 10px 0 15px 0;
      span:first-of-type {
        font-size: 16px;
        color: rgb(0, 0, 0);
      }

      span:last-of-type {
        margin-left: 16px;
        color: #d22b27;
      }
    }

    .second {
      span {
        font-size: 13px;
      }
      span:nth-of-type(1) {
        margin-right: 10px;
      }

      span:nth-of-type(2) {
        margin-right: 100px;
      }
      span:nth-of-type(3) {
        color: #26a2ff;
      }
    }

    li {
      padding-bottom: 15px;
    }
  }

  .year,.sick {
    overflow: hidden;
    padding-bottom: 15px;
    .year-detail,.sick-detail {
      float: left;

      & > h2 {
        font-size: 16px;
      }
      .range {
        
        height: 8px;

        width: 100%;

        margin-top: 6px;

        border-radius: 5px;

        position: relative;

        background-color: #26a2ff;

        span {
          background-color: #ccccff;

          height: 8px;

          width: 70%;

          border-radius: 5px;

          position: absolute;

          left: 0;

          top: 0;

          &::before {
            content: '';

            position: absolute;

            right: -8px;

            top: 50%;

            background-color: #fff;

            width: 10px;

            height: 10px;

            margin-top: -6px;

            border: 1px solid #26a2ff;

            border-radius: 50%;
          }
        }
      }
    }
  }


}
</style>
